<template>
  <div class="gallery-view">
    <div class="gallery-header">
      <el-card class="stat-card" border>
        <el-row :gutter="20" type="flex" justify="space-around">
          <el-col :span="4">
            <div class="stat-info">
              <i class="el-icon-calendar stat-icon"></i>
              <div class="stat-text">今天: {{ counts.todayNum }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-info">
              <i class="el-icon-date stat-icon"></i>
              <div class="stat-text">昨天: {{ counts.yesterdayNum }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-info">
              <i class="el-icon-document stat-icon"></i>
              <div class="stat-text">帖子: {{ counts.totalNum }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-info">
              <i class="el-icon-user stat-icon"></i>
              <div class="stat-text">会员: {{ counts.userNum }}</div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="gallery-content">
      <el-card>
        <div class="recipe-container">
          <TitleView title="美食食谱"></TitleView>
          <el-row :gutter="20">
            <el-col :span="8 " v-for="(recipe, index) in recipes" :key="index" style="margin-bottom: 20px;">
              <el-card class="recipe-card" border @click="handleTypeClick(recipe)">
                <div class="recipe-header">
                  <div class="recipe-title">{{ recipe.name }}</div>
                </div>
                <div class="recipe-info">
                  <span>帖子数: {{ recipe.count }}</span><br />
                  <span>最后发帖: {{ recipe.lastTime }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import TitleView from "@/components/TitleView.vue";
import router from "@/router/index.js";
import {getCountData} from "@/api/count.js";
import {getTypeCount} from "@/api/type.js";

const counts = ref({});


onMounted(() => {
  // 获取统计数据
  getCount();
  // 获取食谱数据
  getRecipes();
});

const getCount = () => {
  getCountData().then(res => {
    counts.value = res.data;
  });
}

const getRecipes = () => {
  getTypeCount().then(res => {
    recipes.value = res.data;
  });
};

const recipes = ref([
  {
    title: '热菜食谱',
    posts: 7,
    lastPost: '2024-6-16 12:02',
  },
  {
    title: '凉菜食谱',
    posts: 1,
    lastPost: '2024-6-16 12:18',
  },
  {
    title: '汤羹食谱',
    posts: 1,
    lastPost: '2024-6-16 12:18',
  },
  {
    title: '小吃食谱',
    posts: 0,
    lastPost: '2024-6-16 17:35',
  },
  {
    title: '烧烤食谱',
    posts: 2,
    lastPost: '2024-6-22 17:45',
  },
  {
    title: '泡菜随菜',
    posts: 1,
    lastPost: '2024-7-29 10:33',
  },
]);

const handleTypeClick = (item) => {
  let title = item.name;
  router.push({ name: 'gallery-list', params: { id: item.id, title: title } });
}
</script>

<style scoped>
.gallery-header {
  margin-top: 20px;
  margin-bottom: 10px;
}

.stat-info {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
}

.stat-icon {
  font-size: 24px; /* 图标大小 */
  margin-right: 8px; /* 图标与文本之间的间距 */
}

.stat-text {
  font-size: 16px; /* 字体大小 */
}

.recipe-container {
  max-width: 1000px; /* 设置最大宽度 */
  margin: auto;      /* 自动水平居中 */
  padding: 20px;     /* 内边距 */
}

.recipe-card {
  padding: 15px; /* 卡片内边距 */
  text-align: center; /* 内容居中 */
}

.recipe-header {
  font-size: 18px; /* 标题字体大小 */
  font-weight: bold; /* 标题加粗 */
  margin-bottom: 10px; /* 与内容之间的间距 */
}

.recipe-info {
  font-size: 14px; /* 字体大小 */
  color: #666;     /* 字体颜色 */
}
</style>
